<?php echo \think\facade\View::fetch("public/header"); ?>

<div class="cl-cantainer container">
    <div class="row">
        <div class="col-md-9 cl-left">
            <div class="cl-artical-content">
                <h2 class="cl-artical-title">{{ article.article_title }}</h2>
                <div class="cl-card-tag">
                    <div><span>{{ commentLength }}</span>人评论 /
                        发布时间：<span>{{ article.add_time | formatTime }}</span>
                    </div>
                </div>
                <div class="cl-artical" v-html="article.content"></div>
            </div>

            <div id="comment" class="comment">
                <form class="cl-comment-from">
                    <input type="hidden" id="article_id" v-model="newComment.article_id"/>
                    <div><textarea id="comment_content" placeholder="说点什么吧..." rows="2"
                                   v-model.lazy="newComment.comment_content"></textarea></div>
                    <input id="email" type="text" placeholder="邮箱" v-model.lazy="newComment.email"/>
                    <input id="nickname" type="text" placeholder="昵称" v-model.lazy="newComment.nickname"/>
                    <button type="button" id="comment-btn" @click="addComment()">留言</button>
                    <span class="clearfix"></span>
                    <span style="color: red; padding: 5px 5px;">{{ tips }}</span>
                </form>

                <h4 class="right-card-title" id="right-card-title">全部评论</h4>

                <div class="comment-panel" v-for="item in commentList">
                    <div class="comment-panel-portrait">
                        <img src="/img/portrait.png" class="img-fluid rounded-circle" alt="">
                    </div>
                    <div class="comment-panel-content">
                        <div class="comment-panel-content-item">
                            <div class="comment-author">{{ item.user_name }}</div>
                            <div>{{ item.add_time | formatTime }}</div>
                        </div>
                        <div class="comment-panel-content-main">{{ item.comment_content }}</div>
                    </div>
                    <span class="clearfix"></span>
                    <div class="text-primary"><a href="">回复</a></div>
                </div>

            </div>

        </div>

        <?php echo \think\facade\View::fetch("public/right"); ?>

    </div>
</div>


<?php echo \think\facade\View::fetch("public/footer"); ?>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    let articleId = "<?php echo $article['article_id']; ?>";

    let app = new Vue({
        el: "#app",
        data: {
            newComment: {comment_content: "", nickname: "", email: "", article_id: articleId},
            newCommentTpl: {comment_content: "", nickname: "", email: "", article_id: articleId},
            commentList: [],
            tips: "",
            article: {article_title: "article_title", add_time: 0, content: "content"},
            categoryList: []
        },
        created: function () { // 表示的时候vue初始化会执行这个方法。
            axios.get('/api/article/detail/?article_id=' + articleId)
                .then(function (response) {
                    if (response.data.status == 0) { // 服务端成功处理
                        app.article = response.data.data.article;
                    } else {
                        alert("获取文章失败，具体信息：" + response.data.message);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });

            axios.get('/api/category/list')
                .then(function (response) {
                    if (response.data.status == 0) { // 服务端成功处理
                        app.categoryList = response.data.data.categoryList;
                    } else {
                        alert("获取分类列表失败，具体信息：" + response.data.message);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });

            axios.get('/api/comment/list/?article_id=' + articleId)
                .then(function (response) {
                    if (response.data.status == 0) { // 服务端成功处理
                        app.commentList = response.data.data.commentList;
                    } else {
                        alert("获取评论失败，具体信息：" + response.data.message);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        methods: {
            addComment: function () {
                let _this = this;

                let params = new URLSearchParams();
                for (let i in _this.newComment) {
                    params.append(i, _this.newComment[i]);
                }
                axios.post("/api/comment/add/", params)
                    .then(function (response) {
                        console.log(response);
                        if (response.data.status == 0) { // 服务端成功处理
                            _this.commentList.unshift(response.data.data.comment);
                            _this.newComment = _this.newCommentTpl;
                        } else {
                            alert("增加评论失败，具体信息：" + response.data.message);
                        }
                    }).catch(function (error) {
                    console.log(error);
                });
            }
        },
        watch: {
            'newComment.comment_content': function (newValue, oldValue) {
                if (newValue.length != 0 && (newValue.length < 2 || newValue.length > 500)) {
                    this.tips = "评论内容长度在2~500之间。";
                } else {
                    this.tips = "";
                }
            },
            'newComment.email': function (newValue, oldValue) {
                if (newValue.length != 0 && (newValue.length < 3 || newValue.length > 100)) {
                    this.tips = "邮箱长度在3~100之间。";
                } else {
                    this.tips = "";
                }
            },
            'newComment.nickname': function (newValue, oldValue) {
                if (newValue.length != 0 && (newValue.length < 1 || newValue.length > 20)) {
                    this.tips = "昵称长度在1~20之间。";
                } else {
                    this.tips = "";
                }
            }
        },
        computed: {
            commentLength: function () {
                return this.commentList.length;
            }
        },
        filters: {
            formatTime: function (time) { //
                let date = new Date(time * 1000);
                let year = date.getFullYear();
                let month = (date.getMonth() + 1).toString().padStart(2, '0');
                let day = date.getDate().toString().padStart(2, '0');
                let hour = date.getHours().toString().padStart(2, '0');
                let minute = date.getMinutes().toString().padStart(2, '0');
                let second = date.getSeconds().toString().padStart(2, '0');
                return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
            }
        }
    });


</script>
